<template>
	<view class="container">
		<!-- 服务事项 -->
		<view class="service">
			<view class="service-label">服务事项：</view>
			<view class="service-content">
				<text>请选择</text>
				<uni-icons type="forward" color="#999999" size="18"></uni-icons>
			</view>
		</view>

		<!-- 代书人 -->
		<view class="wrapper">
			<view class="wrapper-hint">选择代书人：</view>
			<view class="wrapper-content">
				<view class="wrapper-content-nav">
					<view class="wrapper-nav-item" :class="{ 'wrapper-nav-item-active': nav_index === 0 }"
						@click="nav_index = 0">合作单位</view>
					<view class="wrapper-nav-item" :class="{ 'wrapper-nav-item-active': nav_index === 1 }"
						@click="nav_index = 1">合作人</view>
				</view>
				<view class="wrapper-list">
					<view class="wrapper-item" v-for="item in 6" :key='item'>
						<view class="wrapper-left">
							<image v-if="selected_index === 1" src="../../static/yan/radio-true.png" mode=""></image>
							<image @click="selected(1)" v-else src="../../static/yan/radio-false.png" mode="">
							</image>
						</view>
						<view class="wrapper-right">
							<view class="wrapper-1">
								<view class="copmpany-name">合作单位名称</view>
								<view class="price">￥1000</view>
							</view>
							<view class="wrapper-2"><text>社会信用代码：123456</text></view>
							<view class="wrapper-3">
								<view class="rate">
									<text>好评率</text>
									<view class="start">
										<uni-rate style="margin: 0 13rpx 0 11rpx;" size="15" color="#D5D5D5"
											:disabled="true" disabledColor="#C0943F" v-model="start_num" />
										<text>{{ start_num }}</text>
									</view>
								</view>
								<view class="check-comment">
									<text>看评语</text>
									<image src="../../static/yan/1653616317314-right-2.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="footer">
			<view class="btn">
				支付￥1000，开始沟通
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				selected_index: 0,
				nav_index: 0,
				start_num: 2.3
			};
		},
		methods: {
			selected(value) {
				this.selected_index = value
			}
		}
	};
</script>
<style lang="scss" scoped>
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 0;

		.btn {
			width: 705rpx;
			height: 88rpx;
			background-color: #53B3D9;
			color: #FFF;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			border-radius: 44rpx;
			margin: auto;
		}
	}

	.wrapper-list {
		padding: 0 23rpx;
		margin-bottom: 128rpx;

		.wrapper-left {
			image {
				width: 30rpx;
				height: 30rpx;
				vertical-align: middle;
			}
		}

		.wrapper-right {
			flex-grow: 1;
			margin-left: 40rpx;
		}
	}

	.wrapper-item {
		display: flex;
		padding: 28rpx 0;
		margin-top: 28rpx;

		.wrapper-3 {
			color: #666;
			font-size: 24rpx;

			.rate {
				display: flex;
				align-items: center;

				.start {
					display: flex;
					align-items: center;

					text {
						color: #C0943F;
						font-size: 22rpx;
					}
				}
			}

			.check-comment {
				display: flex;
				align-items: center;
				color: #333;

				image {
					width: 25rpx;
					height: 25rpx;
				}
			}
		}

		.wrapper-2 {
			color: #999;
			font-size: 24rpx;
			margin: 15rpx 0 23rpx;
		}

		.wrapper-1 {
			align-items: center;
			font-weight: bold;

			.copmpany-name {
				font-size: 30rpx;
				width: 300rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price {
				color: #ff0000;
				font-size: 22rpx;
			}
		}

		.wrapper-1,
		.wrapper-2,
		.wrapper-3 {
			display: flex;
			justify-content: space-between;
		}
	}

	.wrapper-nav-item-active {
		position: relative;
		color: #333;
		font-weight: bold;

		&::after {
			display: block;
			position: absolute;
			left: 50%;
			width: 180rpx;
			margin-left: -90rpx;
			height: 3rpx;
			background-color: #53b3d9;
			content: '';
		}
	}

	.wrapper {
		.wrapper-content {
			background-color: #fff;
			padding-bottom: 20rpx;
		}

		.wrapper-content-nav {
			display: flex;
			justify-content: space-around;
			font-size: 28rpx;
			color: #666;

			.wrapper-nav-item {
				height: 100rpx;
				line-height: 100rpx;
			}
		}

		.wrapper-hint {
			padding: 46rpx 23rpx 34rpx;
		}
	}

	.service {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 0 23rpx;
		height: 113rpx;
		align-items: center;
		color: #666;

		.service-content {
			display: flex;
			align-items: center;
			color: #999;

			image {
				width: 13rpx;
				height: 17rpx;
				margin-left: 17rpx;
			}
		}
	}
</style>
<style>
	page {
		background-color: #f6f6f6;
		font-size: 26rpx;
		color: #333;
	}
</style>
